<template>
    <div>
        <pre v-note>
            1、编译静态资源
                vue模块化项目中，直接作为静态数据用于页面呈现的相关资源，会在vue模块化环境编译时，自动识别服务路径变化，完成路径自动编译
            2、不编译静态资源
                不是环境操作的相关资源，只能以数据方式原封不动的提供JS脚本，有浏览器进行功能执行和加载
                作为数据存储的资源，以图片为例不能使用模块项目中的路径指向关系
                解决方案：将资源作为模块化环境中的变量进行加载，以编译变量后的取值进行数据定义
        </pre>
        <hr>
        <p>图片编译</p>
        <img src="../assets/Snipaste_2022-08-08_13-26-55.png" alt="" srcset="">
        <br>
        <img class="assets-img" src="../assets/logo.png" alt="" srcset="">
        <img class="assets-img" src="../assets/Desert.jpg" alt="" srcset="">
        <hr>
        <p>图片未编译</p>
        <img src="../assets/Snipaste_2022-08-08_13-27-01.png" alt="" srcset="">
        <br>
        <img class="assets-img" :src="path" alt="" srcset="">
        <img class="assets-img" :src="path1" alt="" srcset="">
        <img class="assets-img" :src="path2" alt="" srcset="">
        <img class="assets-img" :src="path3" alt="" srcset="">
        <hr>
        <pre v-note>
            静态资源处理
                - vue模块化项目的静态资源，除非特殊要求，一般存放于 src/asstes 目录
                - 静态资源存储于src目录下，是vue通过webpack的加载器扩展，将多数的静态资源也作为模块进行识别，可以通过模块语法进行加载
                - 静态资源作为模块被项目通过模块语法进行加载时，必须提供明确的路径后缀
                
                - JS文件资源( vue提供无模块输出的导入语法 import "模块路径" )
                    - vue模块化项目中，通过在main.js文件中，作为模块进行加载
                    - 加载的JS静态资源会被打包合并到一个固定统一的JS文件中提供html页面使用
                
                - css样式资源（font 资源）
                    - vue模块化项目中，通过在main.js文件中，作为模块进行加载
                    - 加载的CSS静态资源，会被整合成html独立样式表使用
        </pre>
        <p class="iconfont icon-messages"></p>
        <hr>
        <pre v-note>
            开发时的图片、视频、音频路径问题 
                ( 在一定大小范围内的文件会被转换为base64数据，超过的的文件已文件原始名称拼接上hashCode编码进行新路径生成 )
                - 参与编译过程的图片资源路径 = (在**编译过程中会根据 组件的位置 寻找图片，编译后会进行路径重置**)
                    - ＜img src=""＞ 方式加载的相对路径图片
                    - 单文件组件中 style 标签定义的 css 样式加载的相对路径图片
                    - 以模块语法方式加载的相对路径图片
                    - 通过模块方式加载的css文件中的相对图片路径

                - 不参与编译过程的图片资源路径 = (**此时为保证相对路径图片可以正常加载，图片地址以 index.html 文件作为参考定义**)
                    - 以http协议定义的绝对路径图片
                    - 单文件组件中，标签==行内样式==中加载的图片
                    - 单文件组件中以vue语法方式绑定的变量(组件的仓库变量)，取值相对路径图片时
        </pre>
        <div class="assets-img img-bg"></div>
        <div class="assets-img img-bg2"></div>
        <hr>
        <img class="assets-img" src="https://www.baidu.com/img/flexible/logo/pc/result.png">
        <img class="assets-img" :src="path4" alt="" srcset="">
        <hr>
        <div class="assets-img img-bg3" style="background-image: url('../assets/Desert.jpg')"></div>
        <div class="assets-img img-bg3" :style=" `background-image: url(${require('../assets/Desert.jpg')})`"></div>
        <!-- <div class="assets-img img-bg3" :style=" `background-image: url(${import '../assets/Desert.jpg'})`"></div> -->
        <hr>
        <pre v-note>
            vue模块项目的路径别名 
                - @ 指向 src 目录
        </pre>
    </div>
</template>
<script>
// import aaa from '../assets/js/a.js';
// import "../assets/js/a.js"
// import "../assets/font/iconfont.css";

import img1 from "../assets/logo.png";
import img2 from "../assets/Desert.jpg";
console.log(img1,img2)

export default {
    data() {
        return {
            path:"../assets/logo.png",
            path1:"../assets/Desert.jpg",
            path2:img1,
            path3:img2,
            path4:"https://www.baidu.com/img/flexible/logo/pc/result.png"
        }
    },
}
</script>
<style>
.assets-img{
    width: 80px;
    height: 80px;
    border: 1px solid #999;
}
.iconfont{
    font-size: 30px!important;
    font-weight: bold;
}
.img-bg{
    background-image: url("../assets/Desert.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
}
.img-bg3{
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
}
</style>